<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
        [alt]  有这个属性
        [alt ="背景故宫"] 精准匹配
        [alt ^="abc"] 开头位置匹配
        [alt $="abc"]  结尾位置匹配
        [alt *="abc"]  任意位置匹配
        [alt |="abc"]    abc-开头
        [alt ~="abc"]  abc为空格分开的独立部分
        
        */
        
        img {
            width: 300px;
        }
        
        img[alt^="北京"] {
            border: 5px solid purple;
        }
        
        img[alt$="夜景"] {
            border: 5px solid rgb(236, 184, 12);
        }
        
        img[alt*="美"] {
            border: 5px solid rgb(52, 5, 138);
        }
        
        img[alt |="参赛作品"] {
            border: 5px solid rgb(224, 228, 9);
        }
        
        img[alt~="手机拍摄"] {
            border: 5px solid pink;
        }
    </style>
</head>

<body>
    <img src="images/bj/0.jpg" alt="北京故宫">
    <img src="images/bj/1.jpg" alt="北京鸟巢">
    <img src="images/bj/2.jpg" alt="北京十七孔桥">


    <img src="images/wx/0.jpg" alt="参赛作品-无锡体育场">
    <img src="images/wx/1.jpg" alt="手机拍摄 无锡太湖">
    <img src="images/wx/2.jpg" alt="无锡美景">
    <img src="images/wx/3.jpg" alt="无锡夜景">

</body>

</html>